/**定义动画的ts文件**/
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';

// 定义一个鼠标点击运动的动画box样式的元素会向左向右移动。
export const firstLayerAnimate = trigger('firstLayer', [
  // 定义一个状态left
  state('left', style({ 
      transform: 'translate3d(0,-150%,0)',
      opacity:"0",
     })),
  // 定义另外一个状态right
  state('right', style({ 
      transform: 'translate3d(0,100%,0)',
      opacity:"1", 
    })),
  // 定义运动过程(从left到right状态)
  transition('left=>right', animate(200,keyframes([
      style({ transform: 'translate3d(0,0,0)',opacity:"0" }),
      style({ transform: 'translate3d(0,100%,0)',opacity:"1" }),
    ])
    )),
  // 定义运动过程(从right到left)
  transition('right=>left', animate(200, keyframes([
      style({ transform: 'translate3d(0,100%,0)', opacity:"1" }),
      style({ transform: 'translate3d(0,0,0)',opacity:"0" }),
    ])
    )),
]);